<template>
  <div class="search-container">
    <div style="display: flex">
      <el-text>设备ID：</el-text>
      <div style="margin-left: 10px">
        <el-select
          v-model="deviceStore.currentNodeId"
          filterable
          clearable
          style="width: 240px"
          placeholder="请选择要查询的设备ID"
        >
          <el-option
            v-for="item in deviceStore.nodeIds"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
      <div style="padding-left: 20px">
        <el-button type="primary" :icon="Search" @click="onSearch"
          >查询</el-button
        >
      </div>
      <div style="padding-left: 10px">
        <el-button :icon="Refresh" @click="onRefresh">刷新设备ID列表</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Search, Refresh } from "@element-plus/icons-vue";
import { DeviceTyeps } from "@/types/device";
import { useDeviceManagerStore } from "@/store/device/manager";
import { ElMessage } from "element-plus";

const deviceStore = useDeviceManagerStore();
const isRefresh = ref<boolean>(false);
const searchLoading = ref(false);
function onRefresh() {
  deviceStore.nodeIds = ["device1", "device2", "device3", "device4"];
}
function onSearch() {
  if (deviceStore.currentNodeId == "" || deviceStore.currentNode == null) {
    ElMessage.error("请选择要查询的设备ID");
  }

  deviceStore.currentNode = {
    nodeId: deviceStore.currentNodeId,
    deviceConfigs: [
      {
        ipAddress: "127.0.0.1",
        port: 13666,
        deviceName: "device-name",
        deviceType: DeviceTyeps.SiemensS1500,
      },
    ],
  };
}
</script>

<style scoped>
.search-container {
  padding: 20px 30px 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
